@use '../../styles/mixins' as *;
@use '../_base/palette' as palette;

/* Import the base theme with overrides */
@use '../_base/theme' with (
    // Theme options
    $dark: false,

    // Color palette
    $background-default: #f2f2f2,
    $background-paper: #e8e8e8,
    $text-primary: #000,
    $text-secondary: rgba(0, 0, 0, 0.87),
    $action-focus: #bbb,
    $action-hover: #ddd,
    $divider: rgba(0, 0, 0, 0.14),

    // Components
    $appBar-defaultBg: #e8e8e8,
    $appBar-transparentBg: rgba(232, 232, 232, 0.86),
    $alert-infoFilledBg: #fff3a5,
    $alert-infoFilledColor: #000,
    $button-inheritContainedBg: #d8d8d8,
    $button-inheritContainedHoverBg: #ccc
);

// Override the alpha picker selected colors
.alphaPickerButton-selected {
    @include var(background-color, --jf-palette-primary-main, palette.$primary-main);
    @include var(color, --jf-palette-primary-contrastText, palette.$primary-contrastText);
}

/* Card background color variants */
.defaultCardBackground1 {
    background-color: #009688;
}

.defaultCardBackground2 {
    background-color: #d32f2f;
}

.defaultCardBackground3 {
    background-color: #0288d1;
}

.defaultCardBackground4 {
    background-color: #388e3c;
}

.defaultCardBackground5 {
    background-color: #f57f17;
}

/* Detail ribbon on item details pages */
.detailRibbon {
    background-color: #303030;
    color: #ccc;
    color: rgba(255, 255, 255, 0.87);

    .layout-tv & {
        background: none;
        color: inherit;
    }
}

/* Live TV guide */
.channelPrograms,
.guide-channelHeaderCell,
.programCell {
    border-color: rgba(0, 0, 0, 0.12);
}

.programCell-active {
    background: rgba(0, 0, 0, 0.1) !important;
}
